import React, { memo, useEffect } from 'react';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';

import { HOT_RECOMMEND_LIMIT } from 'common/contants'

import MXThemeHeaderRCM from 'components/theme-header-rcm'
import MXSongsCover from 'components/songs-cover'
import { RecommendWrapper } from './style'
import { getHotRecommendAction } from '../../store/actionCreators';

const MXHotRecommend = memo(() => {
  // state

  // redux hooks
  const { hotRecommends } = useSelector(state => ({
    hotRecommends: state.getIn(['recommend', 'hotRecommends'])
  }), shallowEqual)

  const dispatch = useDispatch()

  // other hooks
  useEffect(() => {
    dispatch(getHotRecommendAction(HOT_RECOMMEND_LIMIT))
  }, [dispatch])

  return (
    <RecommendWrapper>
      <MXThemeHeaderRCM title="热门推荐" keywords={['华语', '流行', '民谣', '摇滚', '电子']}/>
      <div className="recommend-list">
        {
          hotRecommends.map((item) => {
            return <MXSongsCover info={item} key={item.id}/>
          })
        }
      </div>
    </RecommendWrapper>
  );
});

export default MXHotRecommend;